<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>News Management System</title>
  <!-- Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- Lucide Icons -->
  <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
  <style>
    :root {
      --background: 0 0% 100%;
      --foreground: 222.2 84% 4.9%;
      --card: 0 0% 100%;
      --card-foreground: 222.2 84% 4.9%;
      --popover: 0 0% 100%;
      --popover-foreground: 222.2 84% 4.9%;
      --primary: 221.2 83.2% 53.3%;
      --primary-foreground: 210 40% 98%;
      --secondary: 210 40% 96.1%;
      --secondary-foreground: 222.2 47.4% 11.2%;
      --muted: 210 40% 96.1%;
      --muted-foreground: 215.4 16.3% 46.9%;
      --accent: 210 40% 96.1%;
      --accent-foreground: 222.2 47.4% 11.2%;
      --destructive: 0 84.2% 60.2%;
      --destructive-foreground: 210 40% 98%;
      --border: 214.3 31.8% 91.4%;
      --input: 214.3 31.8% 91.4%;
      --ring: 221.2 83.2% 53.3%;
      --radius: 0.5rem;
      --sidebar-background: 0 0% 98%;
      --sidebar-foreground: 240 5.3% 26.1%;
      --sidebar-accent: 240 4.8% 95.9%;
      --sidebar-accent-foreground: 240 5.9% 10%;
      --sidebar-border: 220 13% 91%;
    }

    .dark {
      --background: 222.2 84% 4.9%;
      --foreground: 210 40% 98%;
      --card: 222.2 84% 4.9%;
      --card-foreground: 210 40% 98%;
      --popover: 222.2 84% 4.9%;
      --popover-foreground: 210 40% 98%;
      --primary: 217.2 91.2% 59.8%;
      --primary-foreground: 222.2 47.4% 11.2%;
      --secondary: 217.2 32.6% 17.5%;
      --secondary-foreground: 210 40% 98%;
      --muted: 217.2 32.6% 17.5%;
      --muted-foreground: 215 20.2% 65.1%;
      --accent: 217.2 32.6% 17.5%;
      --accent-foreground: 210 40% 98%;
      --destructive: 0 62.8% 30.6%;
      --destructive-foreground: 210 40% 98%;
      --border: 217.2 32.6% 17.5%;
      --input: 217.2 32.6% 17.5%;
      --ring: 224.3 76.3% 48%;
      --sidebar-background: 240 5.9% 10%;
      --sidebar-foreground: 240 4.8% 95.9%;
      --sidebar-accent: 240 3.7% 15.9%;
      --sidebar-accent-foreground: 240 4.8% 95.9%;
      --sidebar-border: 240 3.7% 15.9%;
    }

    body {
      font-family: 'Times New Roman', Times, serif;
      background-color: hsl(var(--background));
      color: hsl(var(--foreground));
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 0.375rem;
      font-weight: 500;
      padding: 0.5rem 1rem;
      transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
      cursor: pointer;
    }

    .btn-primary {
      background-color: hsl(var(--primary));
      color: hsl(var(--primary-foreground));
    }

    .btn-primary:hover {
      background-color: hsl(var(--primary) / 0.9);
    }

    .btn-outline {
      background-color: transparent;
      border: 1px solid hsl(var(--border));
      color: hsl(var(--foreground));
    }

    .btn-outline:hover {
      background-color: hsl(var(--accent));
      color: hsl(var(--accent-foreground));
    }

    .btn-ghost {
      background-color: transparent;
      color: hsl(var(--foreground));
    }

    .btn-ghost:hover {
      background-color: hsl(var(--accent));
      color: hsl(var(--accent-foreground));
    }

    .btn-icon {
      padding: 0.5rem;
      height: 2rem;
      width: 2rem;
    }

    .btn-sm {
      height: 2rem;
      padding-left: 0.75rem;
      padding-right: 0.75rem;
      font-size: 0.875rem;
    }

    .input {
      display: flex;
      height: 2.5rem;
      width: 100%;
      border-radius: 0.375rem;
      border: 1px solid hsl(var(--border));
      background-color: transparent;
      padding: 0.5rem 0.75rem;
      font-size: 0.875rem;
      color: hsl(var(--foreground));
    }

    .input:focus {
      outline: none;
      box-shadow: 0 0 0 2px hsl(var(--ring));
    }

    .card {
      border-radius: 0.5rem;
      background-color: hsl(var(--card));
      color: hsl(var(--card-foreground));
      border: 1px solid hsl(var(--border));
      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    }

    .badge {
      display: inline-flex;
      align-items: center;
      border-radius: 9999px;
      padding: 0.125rem 0.5rem;
      font-size: 0.75rem;
      font-weight: 500;
      line-height: 1;
      white-space: nowrap;
    }

    .badge-green {
      background-color: #dcfce7;
      color: #166534;
    }

    .dark .badge-green {
      background-color: #166534;
      color: #dcfce7;
    }

    .badge-yellow {
      background-color: #fef9c3;
      color: #854d0e;
    }

    .dark .badge-yellow {
      background-color: #854d0e;
      color: #fef9c3;
    }

    .badge-red {
      background-color: #fee2e2;
      color: #b91c1c;
    }

    .dark .badge-red {
      background-color: #b91c1c;
      color: #fee2e2;
    }

    .badge-outline {
      background-color: transparent;
      border: 1px solid hsl(var(--border));
      color: hsl(var(--foreground));
    }

    .table {
      width: 100%;
      border-collapse: collapse;
    }

    .table th {
      font-weight: 500;
      text-align: left;
      padding: 0.75rem 1rem;
      border-bottom: 1px solid hsl(var(--border));
    }

    .table td {
      padding: 0.75rem 1rem;
      border-bottom: 1px solid hsl(var(--border));
    }

    .table tr:last-child td {
      border-bottom: none;
    }

    .dialog-overlay {
      position: fixed;
      inset: 0;
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 50;
    }

    .dialog-content {
      position: relative;
      width: 100%;
      max-width: 28rem;
      border-radius: 0.5rem;
      background-color: hsl(var(--background));
      padding: 1.5rem;
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
      max-height: calc(100vh - 2rem);
      overflow-y: auto;
    }

    .select {
      position: relative;
      width: 100%;
    }

    .select-trigger {
      display: flex;
      height: 2.5rem;
      width: 100%;
      align-items: center;
      justify-content: space-between;
      border-radius: 0.375rem;
      border: 1px solid hsl(var(--border));
      background-color: transparent;
      padding: 0 0.75rem;
      font-size: 0.875rem;
      line-height: 1.25rem;
      color: hsl(var(--foreground));
      cursor: pointer;
    }

    .select-content {
      position: absolute;
      width: 100%;
      top: 100%;
      left: 0;
      margin-top: 0.25rem;
      border-radius: 0.375rem;
      border: 1px solid hsl(var(--border));
      background-color: hsl(var(--background));
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
      z-index: 10;
      max-height: 15rem;
      overflow-y: auto;
      display: none;
    }

    .select-content.open {
      display: block;
    }

    .select-item {
      display: flex;
      align-items: center;
      padding: 0.5rem 0.75rem;
      cursor: pointer;
    }

    .select-item:hover {
      background-color: hsl(var(--accent));
    }

    .toast {
      position: fixed;
      bottom: 1rem;
      right: 1rem;
      padding: 1rem;
      border-radius: 0.5rem;
      background-color: hsl(var(--background));
      color: hsl(var(--foreground));
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
      z-index: 100;
      max-width: 24rem;
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
      transform: translateY(100%);
      opacity: 0;
      transition: transform 0.2s, opacity 0.2s;
    }

    .toast.show {
      transform: translateY(0);
      opacity: 1;
    }

    .toast-title {
      font-weight: 500;
    }

    .toast-description {
      font-size: 0.875rem;
      color: hsl(var(--muted-foreground));
    }

    .toast-destructive {
      border-left: 4px solid hsl(var(--destructive));
    }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border-width: 0;
    }

    /* Newspaper specific styles */
    .main-title {
      font-family: 'Times New Roman', Times, serif;
      font-weight: 700;
    }

    /* Logo styles */
    .logo-image {
      width: 50px;
      height: 50px;
      object-fit: contain;
      border-radius: 0.375rem;
    }

    /* Opaque header styles */
    .header-opaque {
      background-color: hsl(var(--background));
      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    }

    /* Responsive styles */
    @media (max-width: 768px) {
      .sidebar {
        display: none;
      }
    }
  </style>
</head>
<body>
  <!-- 登录页面 -->
  <div id="login-page" class="flex min-h-screen flex-col items-center justify-center p-4 bg-gray-50">
    <div class="w-full max-w-md">
      <h1 class="text-3xl font-bold text-center mb-8 main-title">The News Translation</h1>
      <div class="card">
        <div class="p-6">
          <h2 class="text-xl font-semibold mb-2">Login</h2>
          <p class="text-muted-foreground mb-6">Enter your credentials to access the management system</p>
          <form id="login-form" class="space-y-4">
            <div class="space-y-2">
              <label for="username" class="block text-sm font-medium">Username</label>
              <input id="username" type="text" class="input" placeholder="Enter your username" required>
            </div>
            <div class="space-y-2">
              <label for="password" class="block text-sm font-medium">Password</label>
              <input id="password" type="password" class="input" placeholder="Enter your password" required>
            </div>
            <button type="submit" class="btn btn-primary w-full" id="login-button">Login</button>
          </form>
        </div>
      </div>
    </div>
  </div>

  <!-- 仪表盘页面 -->
  <div id="dashboard-page" class="hidden min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="sticky top-0 z-10 flex h-16 items-center gap-4 border-b header-opaque px-6">
      <button id="mobile-menu-button" class="btn btn-outline btn-icon md:hidden">
        <i data-lucide="menu" class="h-5 w-5"></i>
        <span class="sr-only">Open menu</span>
      </button>
      
      <!-- Logo image -->
      <img src="logo.png" alt="Logo" class="logo-image mr-3">
      
      <div class="flex-1">
        <h1 class="text-xl font-bold main-title">The News Translation</h1>
      </div>
      <div class="flex items-center gap-4">
        <span class="text-sm" id="user-name">Welcome, Admin</span>
        <button id="theme-toggle" class="btn btn-outline btn-icon">
          <i data-lucide="sun" class="h-5 w-5 dark:hidden"></i>
          <i data-lucide="moon" class="h-5 w-5 hidden dark:block"></i>
          <span class="sr-only">Toggle theme</span>
        </button>
        <button id="logout-button" class="btn btn-ghost btn-icon">
          <i data-lucide="log-out" class="h-5 w-5"></i>
          <span class="sr-only">Log out</span>
        </button>
      </div>
    </header>

    <div class="flex flex-1">
      <!-- 侧边栏 -->
      <aside class="sidebar hidden md:block w-64 bg-sidebar border-r border-sidebar-border">
        <div class="px-4 py-4">
          <ul>
            <li class="mt-2">
              <a href="#" class="flex items-center gap-2 px-2 py-2 rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
                <i data-lucide="newspaper" class="h-5 w-5"></i>
                <span>Articles</span>
              </a>
            </li>
          </ul>
        </div>
      </aside>

      <!-- 移动端菜单 -->
      <div id="mobile-menu" class="fixed inset-0 z-50 hidden">
        <div class="absolute inset-0 bg-black/50" id="mobile-menu-overlay"></div>
        <div class="absolute left-0 top-0 h-full w-64 bg-sidebar p-4">
          <div class="flex items-center justify-between mb-4">
            <h2 class="text-lg font-semibold main-title">The News Translation</h2>
            <button id="close-mobile-menu" class="btn btn-ghost btn-icon">
              <i data-lucide="x" class="h-5 w-5"></i>
            </button>
          </div>
          <ul>
            <li>
              <a href="#" class="flex items-center gap-2 px-2 py-2 rounded-md bg-sidebar-accent text-sidebar-accent-foreground">
                <i data-lucide="layout-dashboard" class="h-5 w-5"></i>
                <span>Dashboard</span>
              </a>
            </li>
            <li class="mt-2">
              <a href="#" class="flex items-center gap-2 px-2 py-2 rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
                <i data-lucide="newspaper" class="h-5 w-5"></i>
                <span>Articles</span>
              </a>
            </li>
            <li class="mt-2">
              <a href="#" class="flex items-center gap-2 px-2 py-2 rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
                <i data-lucide="settings" class="h-5 w-5"></i>
                <span>Settings</span>
              </a>
            </li>
          </ul>
        </div>
      </div>

      <!-- 主内容区 -->
      <main class="flex-1 p-6">
        <div class="flex flex-col gap-8">
          <div>
            <h2 class="text-2xl font-bold tracking-tight">News Management</h2>
            <p class="text-muted-foreground">
              Import, manage, and edit news articles for translation
            </p>
          </div>
          
          <!-- 新闻导入区域 -->
          <div class="card">
            <div class="p-6">
              <h3 class="text-xl font-semibold mb-4">Import News</h3>
              <div class="space-y-4">
                <div class="flex items-center justify-center w-full">
                  <label for="file-upload" class="flex flex-col items-center justify-center w-full h-32 border-2 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-gray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500">
                    <div class="flex flex-col items-center justify-center pt-5 pb-6">
                      <i data-lucide="upload" class="w-8 h-8 mb-3 text-gray-500 dark:text-gray-400"></i>
                      <p class="mb-2 text-sm text-gray-500 dark:text-gray-400">
                        <span class="font-semibold">Click to select files</span> or drag and drop
                      </p>
                      <p class="text-xs text-gray-500 dark:text-gray-400">Supported formats: TXT, DOC, PDF, HTML</p>
                    </div>
                    <input id="file-upload" type="file" class="hidden" multiple>
                  </label>
                </div>

                <div id="selected-files-container" class="mt-4 hidden">
                  <h4 class="text-sm font-medium mb-2">Selected <span id="selected-files-count">0</span> files:</h4>
                  <div id="selected-files" class="flex flex-wrap gap-2"></div>
                </div>

                <button id="import-button" class="btn btn-primary w-full" disabled>Import News</button>
              </div>
            </div>
          </div>
          
          <!-- 新闻列表区域 -->
          <div class="space-y-4">
            <h3 class="text-xl font-semibold">News Articles</h3>
            
            <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
              <div class="relative w-full max-w-sm">
                <i data-lucide="search" class="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground"></i>
                <input id="search-input" type="search" placeholder="Search by title or category..." class="input pl-8">
              </div>
              
              <button id="add-news-button" class="btn btn-primary whitespace-nowrap">
                <i data-lucide="plus" class="mr-2 h-4 w-4"></i>
                Add News
              </button>
            </div>
            
            <div class="rounded-md border overflow-x-auto">
              <table class="table w-full">
                <thead>
                  <tr>
                    <th>Title</th>
                    <th>Category</th>
                    <th>Import Date</th>
                    <th>Difficulty</th>
                    <th class="text-right">Actions</th>
                  </tr>
                </thead>
                <tbody id="news-table-body">
                  <!-- 新闻列表将通过JavaScript动态生成 -->
                </tbody>
              </table>
            </div>
            
            <!-- 分页控件 -->
            <div id="pagination" class="flex items-center justify-between mt-4">
              <div class="text-sm text-muted-foreground">
                Showing <span id="pagination-range">0-0</span> of <span id="pagination-total">0</span> items
              </div>
              <div class="flex items-center space-x-2">
                <button id="prev-page" class="btn btn-outline btn-sm px-2 py-1 h-8 disabled:opacity-50 disabled:cursor-not-allowed">
                  <i data-lucide="chevron-left" class="h-4 w-4"></i>
                  <span>Previous</span>
                </button>
                <div id="page-numbers" class="flex items-center space-x-1">
                  <!-- 页码将通过JavaScript动态生成 -->
                </div>
                <button id="next-page" class="btn btn-outline btn-sm px-2 py-1 h-8 disabled:opacity-50 disabled:cursor-not-allowed">
                  <span>Next</span>
                  <i data-lucide="chevron-right" class="h-4 w-4"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>
  </div>

  <!-- 添加新闻对话框 -->
<div id="add-news-dialog" class="dialog-overlay hidden">
  <div class="dialog-content">
    <h2 class="text-xl font-semibold mb-2">Add News</h2>
    <p class="text-muted-foreground mb-4">Fill in the details to add a new news article</p>
    <div class="grid gap-4 py-4">
      <div class="grid gap-2">
        <label for="news-title" class="block text-sm font-medium">News Title</label>
        <input id="news-title" type="text" class="input" placeholder="Enter news title">
      </div>
      <div class="grid gap-2">
        <label for="news-content" class="block text-sm font-medium">News Content</label>
        <textarea id="news-content" class="input min-h-[120px]" placeholder="Enter news content"></textarea>
      </div>
      <div class="grid gap-2">
        <label for="news-category" class="block text-sm font-medium">Category</label>
        <div class="select">
          <button id="category-select" class="select-trigger">
            <span id="category-value">Select category</span>
            <i data-lucide="chevron-down" class="h-4 w-4"></i>
          </button>
          <div id="category-dropdown" class="select-content">
            <!-- 分类选项将通过JavaScript动态生成 -->
          </div>
        </div>
      </div>
      <div class="grid gap-2">
        <label for="news-difficulty" class="block text-sm font-medium">Difficulty Level</label>
        <div class="select">
          <button id="difficulty-select" class="select-trigger">
            <span id="difficulty-value">Select difficulty</span>
            <i data-lucide="chevron-down" class="h-4 w-4"></i>
          </button>
          <div id="difficulty-dropdown" class="select-content">
            <!-- 难度选项将通过JavaScript动态生成 -->
          </div>
        </div>
      </div>
    </div>
    <div class="flex justify-end gap-2 mt-4">
      <button id="cancel-add-news" class="btn btn-outline">Cancel</button>
      <button id="confirm-add-news" class="btn btn-primary">Add</button>
    </div>
  </div>
</div>

  <!-- 编辑新闻对话框 -->
  <div id="edit-news-dialog" class="dialog-overlay hidden">
    <div class="dialog-content">
      <h2 class="text-xl font-semibold mb-2">Edit News</h2>
      <p class="text-muted-foreground mb-4">Modify news information</p>
      <div class="grid gap-4 py-4">
        <div class="grid gap-2">
          <label for="edit-news-title" class="block text-sm font-medium">News Title</label>
          <input id="edit-news-title" type="text" class="input" placeholder="Enter news title">
        </div>
        <div class="grid gap-2">
          <label for="edit-news-category" class="block text-sm font-medium">Category</label>
          <div class="select">
            <button id="edit-category-select" class="select-trigger">
              <span id="edit-category-value">Select category</span>
              <i data-lucide="chevron-down" class="h-4 w-4"></i>
            </button>
            <div id="edit-category-dropdown" class="select-content">
              <!-- 分类选项将通过JavaScript动态生成 -->
            </div>
          </div>
        </div>
        <div class="grid gap-2">
          <label for="edit-news-difficulty" class="block text-sm font-medium">Difficulty Level</label>
          <div class="select">
            <button id="edit-difficulty-select" class="select-trigger">
              <span id="edit-difficulty-value">Select difficulty</span>
              <i data-lucide="chevron-down" class="h-4 w-4"></i>
            </button>
            <div id="edit-difficulty-dropdown" class="select-content">
              <!-- 难度选项将通过JavaScript动态生成 -->
            </div>
          </div>
        </div>
      </div>
      <div class="flex justify-end gap-2 mt-4">
        <button id="cancel-edit-news" class="btn btn-outline">Cancel</button>
        <button id="confirm-edit-news" class="btn btn-primary">Save</button>
      </div>
    </div>
  </div>

  <!-- 删除新闻确认对话框 -->
  <div id="delete-news-dialog" class="dialog-overlay hidden">
    <div class="dialog-content">
      <h2 class="text-xl font-semibold mb-2">Delete News</h2>
      <p class="text-muted-foreground mb-4">Are you sure you want to delete this news article? This action cannot be undone.</p>
      <div class="py-2">
        <div class="p-4 bg-gray-50 dark:bg-gray-800 rounded-md">
          <p id="delete-news-title" class="font-medium"></p>
          <p id="delete-news-category" class="text-sm text-muted-foreground mt-1"></p>
        </div>
      </div>
      <div class="flex justify-end gap-2 mt-4">
        <button id="cancel-delete-news" class="btn btn-outline">Cancel</button>
        <button id="confirm-delete-news" class="btn btn-primary bg-destructive text-destructive-foreground hover:bg-destructive/90">Confirm Delete</button>
      </div>
    </div>
  </div>

  <!-- 提示框 -->
  <div id="toast" class="toast">
    <div id="toast-title" class="toast-title"></div>
    <div id="toast-description" class="toast-description"></div>
  </div>

  <script>
    // 初始化Lucide图标
    document.addEventListener('DOMContentLoaded', () => {
      lucide.createIcons();
    });

    // 新闻分类
    const newsCategories = [
      "Politics",
      "Economy",
      "Technology",
      "Culture",
      "Society",
      "Sports",
      "Health",
      "Education"
    ];

    // 难度级别
    const difficultyLevels = [
      { value: "a1", label: "A1" },
      { value: "a2", label: "A2" },
      { value: "a3", label: "A3" },
      { value: "a4", label: "A4" },
      { value: "a5", label: "A5" }
    ];

      // 示例新闻数据 (保留英文标题)
      let newsData = [
    {
      id: "1",
      title: "Mark Carney Will Replace Justin Trudeau as Party Leader",
      category: "Politics",
      importTime: "2025-03-15 09:30",
      difficulty: "a3"
    },
    {
      id: "2",
      title: "All-Purpose Biscuits That Anyone Can Make",
      category: "Culture",
      importTime: "2025-03-14 14:45",
      difficulty: "a1"
    },
    {
      id: "3",
      title: "Nasdaq Index Up 0.7%",
      category: "Economy",
      importTime: "2025-03-13 16:20",
      difficulty: "a5"
    },
    {
      id: "4",
      title: "New AI Model Can Translate 100 Languages Simultaneously",
      category: "Technology",
      importTime: "2025-03-12 10:15",
      difficulty: "a3"
    },
    {
      id: "5",
      title: "Global Climate Summit Reaches Historic Agreement",
      category: "Politics",
      importTime: "2025-03-11 08:40",
      difficulty: "a5"
    },
    {
      id: "6",
      title: "Scientists Discover New Species in Amazon Rainforest",
      category: "Technology",
      importTime: "2025-03-10 13:25",
      difficulty: "a3"
    },
    {
      id: "7",
      title: "Olympic Committee Announces Host City for 2036 Games",
      category: "Sports",
      importTime: "2025-03-09 15:30",
      difficulty: "a2"
    },
    {
      id: "8",
      title: "Traditional Tea Ceremony: A Cultural Heritage",
      category: "Culture",
      importTime: "2025-03-08 09:50",
      difficulty: "a3"
    },
    {
      id: "9",
      title: "Major Central Banks Cut Interest Rates",
      category: "Economy",
      importTime: "2025-03-07 11:20",
      difficulty: "a5"
    },
    {
      id: "10",
      title: "New Health Study Reveals Benefits of Mediterranean Diet",
      category: "Health",
      importTime: "2025-03-06 14:10",
      difficulty: "a1"
    },
    {
      id: "11",
      title: "Virtual Reality Technology Transforms Education",
      category: "Education",
      importTime: "2025-03-05 16:45",
      difficulty: "a4"
    },
    {
      id: "12",
      title: "International Film Festival Announces Award Winners",
      category: "Culture",
      importTime: "2025-03-04 18:30",
      difficulty: "a2"
    },
    {
      id: "13",
      title: "Renewable Energy Investments Reach Record High",
      category: "Economy",
      importTime: "2025-03-03 09:15",
      difficulty: "a4"
    },
    {
      id: "14",
      title: "World Leaders Gather for G20 Summit",
      category: "Politics",
      importTime: "2025-03-02 10:40",
      difficulty: "a5"
    },
    {
      id: "15",
      title: "Breakthrough in Quantum Computing Achieved",
      category: "Technology",
      importTime: "2025-03-01 12:20",
      difficulty: "a5"
    },
    {
      id: "16",
      title: "Champion Tennis Player Announces Retirement",
      category: "Sports",
      importTime: "2025-02-28 15:10",
      difficulty: "a1"
    },
    {
      id: "17",
      title: "Ancient Artifacts Discovered in Archaeological Dig",
      category: "Culture",
      importTime: "2025-02-27 13:50",
      difficulty: "a3"
    },
    {
      id: "18",
      title: "Stock Markets React to Economic Forecast",
      category: "Economy",
      importTime: "2025-02-26 11:30",
      difficulty: "a5"
    },
    {
      id: "19",
      title: "New Vaccine Shows Promise Against Multiple Viruses",
      category: "Health",
      importTime: "2025-02-25 09:20",
      difficulty: "a4"
    },
    {
      id: "20",
      title: "University Research Funding Increases by 15%",
      category: "Education",
      importTime: "2025-02-24 14:40",
      difficulty: "a2"
    }
  ];
    // 当前编辑的新闻ID
    let currentEditId = null;

    // DOM元素
    const loginPage = document.getElementById('login-page');
    const dashboardPage = document.getElementById('dashboard-page');
    const loginForm = document.getElementById('login-form');
    const loginButton = document.getElementById('login-button');
    const logoutButton = document.getElementById('logout-button');
    const userName = document.getElementById('user-name');
    const themeToggle = document.getElementById('theme-toggle');
    const mobileMenuButton = document.getElementById('mobile-menu-button');
    const mobileMenu = document.getElementById('mobile-menu');
    const closeMobileMenu = document.getElementById('close-mobile-menu');
    const mobileMenuOverlay = document.getElementById('mobile-menu-overlay');
    const fileUpload = document.getElementById('file-upload');
    const selectedFilesContainer = document.getElementById('selected-files-container');
    const selectedFilesCount = document.getElementById('selected-files-count');
    const selectedFiles = document.getElementById('selected-files');
    const importButton = document.getElementById('import-button');
    const searchInput = document.getElementById('search-input');
    const newsTableBody = document.getElementById('news-table-body');
    const addNewsButton = document.getElementById('add-news-button');
    const addNewsDialog = document.getElementById('add-news-dialog');
    const cancelAddNews = document.getElementById('cancel-add-news');
    const confirmAddNews = document.getElementById('confirm-add-news');
    const newsTitle = document.getElementById('news-title');
    const categorySelect = document.getElementById('category-select');
    const categoryValue = document.getElementById('category-value');
    const categoryDropdown = document.getElementById('category-dropdown');
    const difficultySelect = document.getElementById('difficulty-select');
    const difficultyValue = document.getElementById('difficulty-value');
    const difficultyDropdown = document.getElementById('difficulty-dropdown');
    const editNewsDialog = document.getElementById('edit-news-dialog');
    const cancelEditNews = document.getElementById('cancel-edit-news');
    const confirmEditNews = document.getElementById('confirm-edit-news');
    const editNewsTitle = document.getElementById('edit-news-title');
    const editCategorySelect = document.getElementById('edit-category-select');
    const editCategoryValue = document.getElementById('edit-category-value');
    const editCategoryDropdown = document.getElementById('edit-category-dropdown');
    const editDifficultySelect = document.getElementById('edit-difficulty-select');
    const editDifficultyValue = document.getElementById('edit-difficulty-value');
    const editDifficultyDropdown = document.getElementById('edit-difficulty-dropdown');
    const toast = document.getElementById('toast');
    const toastTitle = document.getElementById('toast-title');
    const toastDescription = document.getElementById('toast-description');

    // 初始化下拉菜单
    function initializeDropdowns() {
      // 添加新闻对话框
      categoryDropdown.innerHTML = '';
      newsCategories.forEach(category => {
        const item = document.createElement('div');
        item.className = 'select-item';
        item.textContent = category;
        item.addEventListener('click', () => {
          categoryValue.textContent = category;
          categoryDropdown.classList.remove('open');
        });
        categoryDropdown.appendChild(item);
      });

      difficultyDropdown.innerHTML = '';
      difficultyLevels.forEach(level => {
        const item = document.createElement('div');
        item.className = 'select-item';
        item.textContent = level.label;
        item.dataset.value = level.value;
        item.addEventListener('click', () => {
          difficultyValue.textContent = level.label;
          difficultyValue.dataset.value = level.value;
          difficultyDropdown.classList.remove('open');
        });
        difficultyDropdown.appendChild(item);
      });

      // 编辑新闻对话框
      editCategoryDropdown.innerHTML = '';
      newsCategories.forEach(category => {
        const item = document.createElement('div');
        item.className = 'select-item';
        item.textContent = category;
        item.addEventListener('click', () => {
          editCategoryValue.textContent = category;
          editCategoryDropdown.classList.remove('open');
        });
        editCategoryDropdown.appendChild(item);
      });

      editDifficultyDropdown.innerHTML = '';
      difficultyLevels.forEach(level => {
        const item = document.createElement('div');
        item.className = 'select-item';
        item.textContent = level.label;
        item.dataset.value = level.value;
        item.addEventListener('click', () => {
          editDifficultyValue.textContent = level.label;
          editDifficultyValue.dataset.value = level.value;
          editDifficultyDropdown.classList.remove('open');
        });
        editDifficultyDropdown.appendChild(item);
      });
    }

    // 下拉菜单点击事件
    categorySelect.addEventListener('click', () => {
      categoryDropdown.classList.toggle('open');
    });

    difficultySelect.addEventListener('click', () => {
      difficultyDropdown.classList.toggle('open');
    });

    editCategorySelect.addEventListener('click', () => {
      editCategoryDropdown.classList.toggle('open');
    });

    editDifficultySelect.addEventListener('click', () => {
      editDifficultyDropdown.classList.toggle('open');
    });

    // 点击外部关闭下拉菜单
    document.addEventListener('click', (e) => {
      if (!categorySelect.contains(e.target)) {
        categoryDropdown.classList.remove('open');
      }
      if (!difficultySelect.contains(e.target)) {
        difficultyDropdown.classList.remove('open');
      }
      if (!editCategorySelect.contains(e.target)) {
        editCategoryDropdown.classList.remove('open');
      }
      if (!editDifficultySelect.contains(e.target)) {
        editDifficultyDropdown.classList.remove('open');
      }
    });

    // 显示提示框
    function showToast(title, description, type = 'default') {
      toastTitle.textContent = title;
      toastDescription.textContent = description;
      
      toast.className = 'toast';
      if (type === 'destructive') {
        toast.classList.add('toast-destructive');
      }
      
      toast.classList.add('show');
      
      setTimeout(() => {
        toast.classList.remove('show');
      }, 3000);
    }

    // 登录功能
    loginForm.addEventListener('submit', (e) => {
      e.preventDefault();
      const username = document.getElementById('username').value;
      const password = document.getElementById('password').value;
      
      loginButton.textContent = 'Logging in...';
      loginButton.disabled = true;
      
      // 模拟登录验证
      setTimeout(() => {
        // 测试账号: admin/admin123
        if (username === 'admin' && password === 'admin123') {
          // 保存登录状态
          localStorage.setItem('isLoggedIn', 'true');
          localStorage.setItem('user', JSON.stringify({ name: 'Admin', role: 'admin' }));
          
          // 显示仪表盘
          loginPage.classList.add('hidden');
          dashboardPage.classList.remove('hidden');
          
          // 重置表单
          loginForm.reset();
        } else {
          showToast('Login Failed', 'Invalid username or password', 'destructive');
        }
        
        loginButton.textContent = 'Login';
        loginButton.disabled = false;
      }, 1000);
    });

    // 退出登录
    logoutButton.addEventListener('click', () => {
      localStorage.removeItem('isLoggedIn');
      localStorage.removeItem('user');
      
      dashboardPage.classList.add('hidden');
      loginPage.classList.remove('hidden');
    });

    // 主题切换
    themeToggle.addEventListener('click', () => {
      document.documentElement.classList.toggle('dark');
      
      // 保存主题设置
      const isDark = document.documentElement.classList.contains('dark');
      localStorage.setItem('theme', isDark ? 'dark' : 'light');
    });

    // 移动端菜单
    mobileMenuButton.addEventListener('click', () => {
      mobileMenu.classList.remove('hidden');
    });

    closeMobileMenu.addEventListener('click', () => {
      mobileMenu.classList.add('hidden');
    });

    mobileMenuOverlay.addEventListener('click', () => {
      mobileMenu.classList.add('hidden');
    });

    // 文件上传
    fileUpload.addEventListener('change', () => {
      if (fileUpload.files.length > 0) {
        selectedFilesContainer.classList.remove('hidden');
        selectedFilesCount.textContent = fileUpload.files.length;
        
        selectedFiles.innerHTML = '';
        Array.from(fileUpload.files).forEach(file => {
          const badge = document.createElement('span');
          badge.className = 'badge badge-outline';
          badge.textContent = file.name;
          selectedFiles.appendChild(badge);
        });
        
        importButton.disabled = false;
      } else {
        selectedFilesContainer.classList.add('hidden');
        importButton.disabled = true;
      }
    });

    // 导入新闻
    importButton.addEventListener('click', () => {
      if (fileUpload.files.length === 0) {
        showToast('Select Files', 'Please select news files first', 'destructive');
        return;
      }
      
      importButton.textContent = 'Importing...';
      importButton.disabled = true;
      
      // 模拟导入过程
      setTimeout(() => {
        // 生成新的新闻项
        const newItems = [];
        for (let i = 0; i < fileUpload.files.length; i++) {
          const file = fileUpload.files[i];
          const fileName = file.name.replace(/\.[^/.]+$/, ''); // 移除文件扩展名
          const randomCategory = newsCategories[Math.floor(Math.random() * newsCategories.length)];
          const randomDifficulty = difficultyLevels[Math.floor(Math.random() * difficultyLevels.length)].value;
          
          newItems.push({
            id: Date.now().toString() + i,
            title: fileName, // 保持英文文件名
            category: randomCategory,
            importTime: new Date().toLocaleString(),
            difficulty: randomDifficulty
          });
        }
        
        // 添加到新闻列表
        newsData = [...newItems, ...newsData];
        renderNewsTable();
        
        showToast('Import Successful', `Successfully imported ${fileUpload.files.length} news files`);
        
        // 重置文件上传
        fileUpload.value = '';
        selectedFilesContainer.classList.add('hidden');
        importButton.textContent = 'Import News';
        importButton.disabled = true;
      }, 1500);
    });

    // 搜索新闻
    searchInput.addEventListener('input', () => {
      renderNewsTable();
    });

    // 分页相关
    const itemsPerPage = 5; // 每页显示的新闻数量
    let currentPage = 1; // 当前页码
    
    // 分页DOM元素
    const pagination = document.getElementById('pagination');
    const paginationRange = document.getElementById('pagination-range');
    const paginationTotal = document.getElementById('pagination-total');
    const prevPageBtn = document.getElementById('prev-page');
    const nextPageBtn = document.getElementById('next-page');
    const pageNumbers = document.getElementById('page-numbers');

    // 渲染新闻表格（带分页）
    function renderNewsTable() {
      const searchTerm = searchInput.value.toLowerCase();
      
      // 过滤新闻
      const filteredNews = newsData.filter(item => 
        item.title.toLowerCase().includes(searchTerm) ||
        item.category.toLowerCase().includes(searchTerm)
      );
      
      // 计算分页
      const totalPages = Math.ceil(filteredNews.length / itemsPerPage);
      if (currentPage > totalPages && totalPages > 0) {
        currentPage = totalPages;
      }
      
      // 计算当前页的数据
      const startIndex = (currentPage - 1) * itemsPerPage;
      const endIndex = Math.min(startIndex + itemsPerPage, filteredNews.length);
      const currentPageData = filteredNews.slice(startIndex, endIndex);
      
      // 更新分页信息
      paginationTotal.textContent = filteredNews.length;
      paginationRange.textContent = filteredNews.length === 0 ? '0-0' : `${startIndex + 1}-${endIndex}`;
      
      // 更新分页按钮状态
      prevPageBtn.disabled = currentPage <= 1;
      nextPageBtn.disabled = currentPage >= totalPages;
      
      // 渲染页码
      renderPageNumbers(totalPages);
      
      // 渲染表格
      newsTableBody.innerHTML = '';
      
      if (currentPageData.length === 0) {
        const row = document.createElement('tr');
        row.innerHTML = `
          <td colspan="5" class="h-24 text-center">No news found</td>
        `;
        newsTableBody.appendChild(row);
        return;
      }
      
      currentPageData.forEach(item => {
        const row = document.createElement('tr');
        
        // 获取难度标签颜色和文本
        let difficultyClass = '';
        let difficultyText = '';
        
        switch (item.difficulty) {
          case 'a1':
            difficultyClass = 'badge-green';
            difficultyText = 'A1';
            break;
          case 'a2':
            difficultyClass = 'badge-green';
            difficultyText = 'A2';
            break;
          case 'a3':
            difficultyClass = 'badge-yellow';
            difficultyText = 'A3';
            break;
          case 'a4':
            difficultyClass = 'badge-yellow';
            difficultyText = 'A4';
            break;
          case 'a5':
            difficultyClass = 'badge-red';
            difficultyText = 'A5';
            break;
        }
        
        row.innerHTML = `
          <td class="font-medium">${item.title}</td>
          <td>${item.category}</td>
          <td>${item.importTime}</td>
          <td><span class="badge ${difficultyClass}">${difficultyText}</span></td>
          <td class="text-right">
            <div class="flex justify-end gap-2">
              <button class="btn btn-ghost btn-icon edit-news" data-id="${item.id}">
                <i data-lucide="edit" class="h-4 w-4"></i>
                <span class="sr-only">Edit</span>
              </button>
              <button class="btn btn-ghost btn-icon delete-news" data-id="${item.id}">
                <i data-lucide="trash-2" class="h-4 w-4"></i>
                <span class="sr-only">Delete</span>
              </button>
            </div>
          </td>
        `;
        
        newsTableBody.appendChild(row);
      });
      
      // 重新初始化图标
      lucide.createIcons();
      
      // 添加编辑和删除事件
      document.querySelectorAll('.edit-news').forEach(button => {
        button.addEventListener('click', () => {
          const id = button.dataset.id;
          openEditDialog(id);
        });
      });
      
      document.querySelectorAll('.delete-news').forEach(button => {
        button.addEventListener('click', () => {
          const id = button.dataset.id;
          deleteNews(id);
        });
      });
    }
    
    // 渲染页码
    function renderPageNumbers(totalPages) {
      pageNumbers.innerHTML = '';
      
      // 最多显示5个页码
      const maxVisiblePages = 5;
      let startPage = Math.max(1, currentPage - Math.floor(maxVisiblePages / 2));
      let endPage = startPage + maxVisiblePages - 1;
      
      if (endPage > totalPages) {
        endPage = totalPages;
        startPage = Math.max(1, endPage - maxVisiblePages + 1);
      }
      
      // 添加第一页按钮
      if (startPage > 1) {
        const firstPage = document.createElement('button');
        firstPage.className = 'btn btn-outline btn-sm w-8 h-8 p-0';
        firstPage.textContent = '1';
        firstPage.addEventListener('click', () => goToPage(1));
        pageNumbers.appendChild(firstPage);
        
        // 添加省略号（如果需要）
        if (startPage > 2) {
          const ellipsis = document.createElement('span');
          ellipsis.className = 'px-1';
          ellipsis.textContent = '...';
          pageNumbers.appendChild(ellipsis);
        }
      }
      
      // 添加页码
      for (let i = startPage; i <= endPage; i++) {
        const pageButton = document.createElement('button');
        pageButton.className = `btn ${i === currentPage ? 'btn-primary' : 'btn-outline'} btn-sm w-8 h-8 p-0`;
        pageButton.textContent = i.toString();
        pageButton.addEventListener('click', () => goToPage(i));
        pageNumbers.appendChild(pageButton);
      }
      
      // 添加最后一页按钮
      if (endPage < totalPages) {
        // 添加省略号（如果需要）
        if (endPage < totalPages - 1) {
          const ellipsis = document.createElement('span');
          ellipsis.className = 'px-1';
          ellipsis.textContent = '...';
          pageNumbers.appendChild(ellipsis);
        }
        
        const lastPage = document.createElement('button');
        lastPage.className = 'btn btn-outline btn-sm w-8 h-8 p-0';
        lastPage.textContent = totalPages.toString();
        lastPage.addEventListener('click', () => goToPage(totalPages));
        pageNumbers.appendChild(lastPage);
      }
    }
    
    // 跳转到指定页码
    function goToPage(page) {
      currentPage = page;
      renderNewsTable();
      // 滚动到表格顶部
      newsTableBody.parentElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
    
    // 上一页、下一页按钮事件
    prevPageBtn.addEventListener('click', () => {
      if (currentPage > 1) {
        goToPage(currentPage - 1);
      }
    });
    
    nextPageBtn.addEventListener('click', () => {
      const totalPages = Math.ceil(
        newsData.filter(item => 
          item.title.toLowerCase().includes(searchInput.value.toLowerCase()) ||
          item.category.toLowerCase().includes(searchInput.value.toLowerCase())
        ).length / itemsPerPage
      );
      
      if (currentPage < totalPages) {
        goToPage(currentPage + 1);
      }
    });

    // 添加新闻对话框
    addNewsButton.addEventListener('click', () => {
      // 重置表单
      newsTitle.value = '';
      categoryValue.textContent = 'Select category';
      difficultyValue.textContent = 'Select difficulty';
      difficultyValue.dataset.value = '';
      
      addNewsDialog.classList.remove('hidden');
    });

    cancelAddNews.addEventListener('click', () => {
      addNewsDialog.classList.add('hidden');
    });

    confirmAddNews.addEventListener('click', () => {
      const title = newsTitle.value.trim();
      const category = categoryValue.textContent;
      const difficulty = difficultyValue.dataset.value;
      
      if (!title || category === 'Select category' || !difficulty) {
        showToast('Incomplete Form', 'Please fill in all required fields', 'destructive');
        return;
      }
      
      const newNews = {
        id: Date.now().toString(),
        title: title,
        category: category,
        importTime: new Date().toLocaleString(),
        difficulty: difficulty
      };
      
      newsData = [newNews, ...newsData];
      renderNewsTable();
      
      addNewsDialog.classList.add('hidden');
      showToast('Added Successfully', 'News has been added to the list');
    });

    // 编辑新闻对话框
    function openEditDialog(id) {
      const newsItem = newsData.find(item => item.id === id);
      if (!newsItem) return;
      
      currentEditId = id;
      
      // 填充表单
      editNewsTitle.value = newsItem.title;
      editCategoryValue.textContent = newsItem.category;
      
      const difficultyLevel = difficultyLevels.find(level => level.value === newsItem.difficulty);
      if (difficultyLevel) {
        editDifficultyValue.textContent = difficultyLevel.label;
        editDifficultyValue.dataset.value = difficultyLevel.value;
      }
      
      editNewsDialog.classList.remove('hidden');
    }

    cancelEditNews.addEventListener('click', () => {
      editNewsDialog.classList.add('hidden');
      currentEditId = null;
    });

    confirmEditNews.addEventListener('click', () => {
      if (!currentEditId) return;
      
      const title = editNewsTitle.value.trim();
      const category = editCategoryValue.textContent;
      const difficulty = editDifficultyValue.dataset.value;
      
      if (!title || category === 'Select category' || !difficulty) {
        showToast('Incomplete Form', 'Please fill in all required fields', 'destructive');
        return;
      }
      
      // 更新新闻
      newsData = newsData.map(item => 
        item.id === currentEditId 
          ? { 
              ...item, 
              title: title, 
              category: category, 
              difficulty: difficulty 
            } 
          : item
      );
      
      renderNewsTable();
      
      editNewsDialog.classList.add('hidden');
      currentEditId = null;
      
      showToast('Updated Successfully', 'News has been updated');
    });

    // 当前删除的新闻ID
    let currentDeleteId = null;

    // 删除新闻确认弹窗
    const deleteNewsDialog = document.getElementById('delete-news-dialog');
    const cancelDeleteNews = document.getElementById('cancel-delete-news');
    const confirmDeleteNews = document.getElementById('confirm-delete-news');
    const deleteNewsTitle = document.getElementById('delete-news-title');
    const deleteNewsCategory = document.getElementById('delete-news-category');

    // 打开删除确认对话框
    function deleteNews(id) {
      const newsItem = newsData.find(item => item.id === id);
      if (!newsItem) return;
      
      currentDeleteId = id;
      
      // 显示新闻信息
      deleteNewsTitle.textContent = newsItem.title;
      deleteNewsCategory.textContent = `${newsItem.category} · ${getDifficultyText(newsItem.difficulty)}`;
      
      deleteNewsDialog.classList.remove('hidden');
    }

    // 获取难度文本
    function getDifficultyText(difficulty) {
      const level = difficultyLevels.find(level => level.value === difficulty);
      return level ? level.label : difficulty;
    }

    // 取消删除
    cancelDeleteNews.addEventListener('click', () => {
      deleteNewsDialog.classList.add('hidden');
      currentDeleteId = null;
    });

    // 确认删除
    confirmDeleteNews.addEventListener('click', () => {
      if (!currentDeleteId) return;
      
      newsData = newsData.filter(item => item.id !== currentDeleteId);
      renderNewsTable();
      
      deleteNewsDialog.classList.add('hidden');
      currentDeleteId = null;
      
      showToast('Deleted Successfully', 'News has been deleted');
    });

    // 点击对话框外部关闭对话框
    addNewsDialog.addEventListener('click', (e) => {
      if (e.target === addNewsDialog) {
        addNewsDialog.classList.add('hidden');
      }
    });

    editNewsDialog.addEventListener('click', (e) => {
      if (e.target === editNewsDialog) {
        editNewsDialog.classList.add('hidden');
        currentEditId = null;
      }
    });
    
    deleteNewsDialog.addEventListener('click', (e) => {
      if (e.target === deleteNewsDialog) {
        deleteNewsDialog.classList.add('hidden');
        currentDeleteId = null;
      }
    });

    // 初始化
    function initialize() {
      // 初始化下拉菜单
      initializeDropdowns();
      
      // 检查登录状态
      const isLoggedIn = localStorage.getItem('isLoggedIn');
      if (isLoggedIn) {
        loginPage.classList.add('hidden');
        dashboardPage.classList.remove('hidden');
        
        // 获取用户信息
        const userStr = localStorage.getItem('user');
        if (userStr) {
          const user = JSON.parse(userStr);
          userName.textContent = `Welcome, Admin`;
        }
      }
      
      // 检查主题设置
      const theme = localStorage.getItem('theme');
      if (theme === 'dark') {
        document.documentElement.classList.add('dark');
      }
      
      // 渲染新闻表格
      renderNewsTable();
    }

    // 页面加载完成后初始化
    window.addEventListener('load', initialize);
  </script>
</body>
</html>